<template>
	<view @click="goView(data.id)" class="list-item person-item">
		<view class="info-block">
			<view class="left-item">
				<view class="name">{{data.realName}}</view>
				<view class="info-item">
					<view class="item" v-if="data.workTimeStart=='无'">无经验 ·</view>
					<view class="item" v-else>{{data.workTimeStart}}经验 ·</view>
					<view class="item" v-if="data.educationText">{{data.educationText}} ·</view>
					<view class="item" v-if="data.birthday">{{data.birthday}}岁</view>
				</view>
				<view class="info-item">
					<view class="item">求职期望：</view>
					<view class="item"> {{data.postName}},</view>
					<view class="item">{{data.salaryMin}}-{{data.salaryMax}}元</view>
				</view>
			</view>
			<view class="photo-item">
				<image :src="data.user.faceUrl" v-if="data.user.faceUrl" class="user-photo"></image>
				<image v-else
					src="https://jinchang-job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/avatar/Mr.jpg"
					class="user-photo"></image>
				<view class="iconfont icon-nan" style="background-color: #2778F8;" v-if="data.sex==1"></view>
				<view class="iconfont icon-nv" style="background-color: #FF6680;" v-if="data.sex==2"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "CustomerList",
		props: {
			data: Object
		},
		methods: {
			navigate(url) {
				uni.navigateTo({
					url: url
				})
			},
			goView(id) {
				uni.navigateTo({
					url: '/page_other/resume/index?type=view&id=' + id
				})
			},
		}
	}
</script>

<style lang="scss">
	.list-item {
		width: $content-width;
		margin: 30rpx auto;
		background: #fff;
		border-radius: 10rpx;
		box-shadow: 0 0 10px 0 #efefef;
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;

		.info-block {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;

			.left-item {
				width: calc(100% - 90rpx);

				.name {
					font-size: 32rpx;
					font-weight: bold;
				}

				.info-item {
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					font-size: 28rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.photo-item {
				display: flex;

				.user-photo {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}

				.iconfont {
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-size: 20rpx;
					position: absolute;
					margin-left: 55rpx;
					margin-top: 5rpx;
				}
			}
		}
	}
</style>